<template>
    <scroll-view style="background-color: #f5f5f5">
        <div class="card">
            <div class="row" style="align-items: start">
                <image
                    src="https://ts1.cn.mm.bing.net/th/id/R-C.86ad1b10401d4a6b83f00d17cb04eef6?rik=CppVtnQqOsSaSg&riu=http%3a%2f%2fpic.baike.soso.com%2fugc%2fbaikepic2%2f13936%2f20170509152602-1576941295.jpg%2f0&ehk=4j4SnK61mw9WIQSrKYNiqwoPkdb5zhst3f7E2vQYzSM%3d&risl=&pid=ImgRaw&r=0"
                    mode="aspectFill"
                    style="width: 100px; height: 80px; border-radius: 5px"
                >
                </image>
                <div style="width: 10px"></div>
                <div style="display: flex; flex-direction: column; justify-content: start">
                    <div class="titleText">{{ params.type }}</div>
                    <div class="subText">
                        门店地址: 府城大道505号仁和新城负一楼67号 <br />
                        营业时间: 周一至周日：24h营业1
                        <br />
                    </div>
                </div>
            </div>
        </div>
        <div class="dividerH"></div>
        <div class="card">
            <div class="row" style="justify-content: space-between; width: 100%">
                <div class="titleHeader">订单类型</div>
                <picker :range="timeTypes" :value="timeTypeIndex" @change="onTimeTypeChange">
                    <div class="row">
                        <text>{{ timeTypes[timeTypeIndex] }}</text>
                        <uni-icons type="right"></uni-icons>
                    </div>
                </picker>
            </div>
        </div>
        <div class="dividerH"></div>
        <div class="card">
            <div class="row">
                <text class="titleHeader">姓名</text>
                <uni-easyinput
                    v-model="value"
                    placeholder="请输入姓名"
                    class="input"
                    :input-border="false"
                ></uni-easyinput>
            </div>
        </div>
        <div class="dividerH"></div>
        <div class="card">
            <div class="row">
                <text class="titleHeader">联系方式</text>
                <uni-easyinput
                    v-model="value"
                    placeholder="请输入联系方式"
                    class="input"
                    :input-border="false"
                ></uni-easyinput>
            </div>
        </div>
        <div class="dividerH"></div>
        <div class="card">
            <div class="row" style="justify-content: space-between; width: 100%">
                <text class="titleHeader">预约日期</text>
                <!-- 小时 -->
                <div v-if="timeTypeIndex == 0">
                    <div v-if="params.type === ShareType.common">
                        <uni-datetime-picker
                            v-model="datetimesingle"
                            type="datetimerange"
                            start-placeholder="开始时间"
                            end-placeholder="结束时间"
                            :start="moment().valueOf()"
                            :end="moment().add(1, 'days').valueOf()"
                            @change="changeTime"
                        />
                    </div>
                    <div v-if="params.type === ShareType.meetingRoom">
                        <div>
                            <uni-datetime-picker
                                v-model="datetimesingle"
                                type="date"
                                :start="moment().valueOf()"
                                :end="moment().add(2, 'days').valueOf()"
                                @change="changeDay"
                            />
                        </div>
                    </div>
                </div>
                <!-- 全天 -->
                <div v-if="timeTypeIndex == 1">
                    <div>
                        <uni-datetime-picker
                            v-model="datetimesingle"
                            type="date"
                            :start="moment().valueOf()"
                            :end="moment().add(2, 'days').valueOf()"
                            @change="changeDay"
                        />
                    </div>
                </div>
                <!-- 包月 -->
                <div v-if="timeTypeIndex == 2" class="subText">{{ monthStart }}-{{ monthEnd }}</div>
            </div>
        </div>
        <div v-if="params.type === ShareType.meetingRoom && timeTypeIndex === 0">
            <div>
                <div style="height: 10px"></div>
                <div class="card">
                    <div class="row" style="justify-content: space-between; width: 100%">
                        <text class="titleHeader">预约时间</text>
                        <picker
                            :range="metingRoomTimeRanges"
                            :value="meetingRoomTimeIndex"
                            @change="selectMeetingRoomTimeIndex"
                            >{{
                                meetingRoomTimeIndex > -1
                                    ? metingRoomTimeRanges[meetingRoomTimeIndex]
                                    : '请选择时间段'
                            }}</picker
                        >
                    </div>
                </div>
            </div>
        </div>
        <div style="height: 50px"></div>
        <div>
            <div style="font-size: 12px; color: grey; padding: 10px">
                费用说明：<br />
                1、分为按小时、按天和按月计费；<br />
                2、按小时为5元/每小时，按天为30元/天，按月为800元/月； 3、24小时营业；<br />
                4、白银会员专享85折优惠；<br />
            </div>
        </div>
        <div style="height: 50px"></div>
        <div style="width: 100%">
            <div class="bh" @click="onConfirm">
                <div class="buttonOrange">确认预约</div>
            </div>
        </div>
    </scroll-view>
</template>

<script setup lang="ts">
import { ref, defineProps } from 'vue'

import { onLoad } from '@dcloudio/uni-app'
import TimeSpace from '@/activityPages/components/time-place.vue'
import moment from 'moment'
import ShareType from '../const/share'

let params = ref({})
const metingRoomTimeRanges = ref(['10:00-11:00', '11:000-12:00', '12:00-13:00', '13:00-14:00'])
const meetingRoomTimeIndex = ref(-1)
const detailHtml = ref('<p>详情ajsldjalsjdlkjalksj大会上利空打击奥克兰决定了卡壳了</p>')

function selectMeetingRoomTimeIndex(i) {
    meetingRoomTimeIndex.value = i.detail.value
}
const timeTypes = ref(['小时', '全天', '包月'])

onLoad((e) => {
    console.log('预约', e)
    params.value = e
    if (e.type === ShareType.meetingRoom) {
        timeTypes.value = ['小时', '全天']
    }
})
const timeTypeIndex = ref(0)

function onTimeTypeChange(e) {
    timeTypeIndex.value = e.detail.value
    console.log('timeTypeIndex=', timeTypeIndex.value)
}
const days = []
const today = new Date()
for (let index = 0; index < 3; index++) {
    const day = moment().add(index, 'days')

    days.push(day.format('YYYY-MM-DD'))
}

const dayIndex = ref(-1)
function onDayChange(e) {
    dayIndex.value = e.detail.value
}
function isNotMonth() {
    console.log('isNotMonth timeTypeIndex=', timeTypeIndex.value)
    return timeTypeIndex.value !== 2
}
function onConfirm() {
    //todo 确认预约
    console.log('onConfirm确认预约')
    uni.navigateTo({
        url: `/activityPages/office-share/common-share-order-detail?type=${params.value.type}`
    })
}
const monthStart = new moment().format('YYYY-MM-DD')

const monthEnd = new moment().add(1, 'months').format('YYYY-MM-DD')
let dateTime = ''
function changeTime(e) {
    console.log('changeTime e=', e)
    dateTime = e.join('-')
}
function changeDay(e) {
    console.log('changeDay e=', e)
    dateTime = e
}
</script>

<style scoped lang="scss">
@import url('@/activityPages/style/card.css');
.titleHeader {
    color: grey;
}
.textCs {
    font-size: 11px;
}
.textBody {
    font-size: 12px;
}
.bh {
    padding-bottom: 20px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    width: 100%;
}
.buttonOrange {
    height: 35px;
    width: 189px;
    line-height: 20px;
    border-radius: 20px;
    background-color: rgba(236, 106, 45, 1);
    color: rgba(255, 255, 255, 1);
    font-size: 14px;
    text-align: center;
    font-family: Microsoft Yahei;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
</style>
